<template>
  <div class="app-container">
    <el-row class="pagecenter">
      <el-form :inline="true" :model="listQuery">
        <el-form-item label="日志类型">
          <el-select v-model="listQuery.type" placeholder="日志类型" class="selectStyle">
            <el-option v-for="item in systemLogs" :key="item.dictvalue" :label="item.dictname" :value="item.dictvalue"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="排序方式">
              <el-select v-model="listQuery.ordertype" placeholder="排序方式" class="selectStyle">
                <el-option label="默认" value=""></el-option>
                <el-option label="最近登录" value="lastLogin"></el-option>
                <el-option label="最近注册" value="usercreatedate"></el-option>
              </el-select>
            </el-form-item> -->
        <el-form-item label="日志时间">
          <el-date-picker v-model="dateScope" type="daterange" placeholder="选择时间范围" format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="关键词查询">
          <el-input :maxlength="50" placeholder="账号或主机IP" v-model="listQuery.param"  @keyup.enter.native="fetchData"></el-input>
        </el-form-item>
        <el-form-item label-width="80px">
          <el-button @click="fetchData" icon="search">查询</el-button>
          <el-button @click="resetFetch" v-show="btnVisible.isView">
            <icon-svg icon-class="zhongzhi1"></icon-svg>&nbsp;&nbsp;重置条件</el-button>
          <!-- <el-button icon="document" @click="handleDownload">导出excel</el-button> -->
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="pageborder">
      <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" :fit="true" highlight-current-row tooltip-effect="dark" style="width: 100%">
        <el-table-column label='序号' min-width="80" header-align="center" align="center">
          <template scope="scope">
            {{ page.pageSize * (page.currentPage - 1) + scope.$index + 1}}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="uid" label="日志编号">
              <template scope="scope">
                <span>{{scope.row.uid}}</span>
              </template>
            </el-table-column> -->
        <el-table-column prop="countType" label="日志类型" min-width="110" header-align="center" align="center">
          <template scope="scope">
            {{scope.row.typename}}
          </template>
        </el-table-column>
        <el-table-column prop="createtime" label="日志时间" min-width="180">
          <template scope="scope">
            <span>{{scope.row.createtime}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="actionname" label="操作内容" :show-overflow-tooltip="true" min-width="350" header-align="center" align="left">
          <template scope="scope">
            <span>{{scope.row.actionname}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remaincontent" label="操作结果" :show-overflow-tooltip="true" min-width="300" header-align="center" align="left">
          <template scope="scope">
            <span>{{scope.row.remaincontent}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="账号名称" min-width="300" header-align="center" align="left">
          <template scope="scope">
            <span>{{scope.row.username}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="param" label="请求参数" :show-overflow-tooltip="true">
              <template scope="scope">
                <span>{{scope.row.param}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="method" label="请求方法" :show-overflow-tooltip="true">
              <template scope="scope">
                <span>{{scope.row.method}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="expenditure" label="请求耗时" :show-overflow-tooltip="true">
              <template scope="scope">
                <span>{{scope.row.expenditure}}</span>
              </template>
            </el-table-column> -->
        <el-table-column prop="ip" label="用户主机ip" min-width="170" header-align="center" align="left">
          <template scope="scope">
            <span>{{scope.row.ip}}</span>
          </template>
        </el-table-column>

      </el-table>
    </el-row>
    <el-row class="pagination" v-if="page.total > 0 ? true : false">
      <el-pagination @current-change="handleCurrentChange" :page-size="page.pageSize" :current-page.sync="page.currentPage" 
          layout="total, prev, pager, next, jumper" :total="page.total">
      </el-pagination>
    </el-row>
  </div>
</template>

<style scoped>
.pagination {
  text-align: center;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.colSpace {
  margin-left: 5px;
}

td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.selectStyle {
  width: 145px;
}

.el-form-item {
  margin-bottom: 15px;
}
</style>

<script>
import { getSystemLogList, getSystemLogTypeList } from 'api/system';
import { parseTime } from 'utils/index';
import { btnIsVisible } from 'utils/customer';

export default {
  data() {
    return {
      list: [],
      listQuery: {
        param: null,
        type: '',
        createdatestart: '',
        createdateend: ''
      },
      page: {
        pageSize: null,
        total: null,
        totalPage: null,
        currentPage: null
      },
      listLoading: true,
      dateScope: null,
      systemLogs: [],
      btnVisible: {
        isView: false,
      }
    }
  },
  watch: {
    'listQuery.type': function(val) {
      this.handleCurrentChange(1)
    },
    // 'listQuery.param': function(val) {
    //   if (oldval && !val) {
    //     this.page.currentPage = 1
    //   }
    // },
    dateScope: function(val, oldval) {
      if (val || (oldval && !val)) {
        this.handleCurrentChange(1)
      }
    },
  },
  created() {
    this.getSystemLogs();
    this.handleCurrentChange(1)
    this.getBtnVisbleStatus()
  },
  methods: {
    getBtnVisbleStatus() {
      this.btnVisible.isView = btnIsVisible('LOGGER_MANAGER_EXAMINE') || false;
    },
    getSystemLogs() {
      let requestParams = {
        dicttype: 'LOGGER_TYPE'
      }
      getSystemLogTypeList(requestParams).then(response => {
        let res = response.data;
        if (res.flag === 1) {
          this.systemLogs = res.data;
        }
      })
    },
    resetFetch() {
      this.listQuery.roleid = '';
      this.dateScope = null;
      this.listQuery.type = '';
      this.listQuery.endcreatetime = null;
      this.listQuery.endcreatetime = null;
      this.listQuery.param = '';
      this.handleCurrentChange(1)
    },
    fetchData() {
      this.listLoading = true;
      this.page.pageSize = this.page.pageSize || 10;
      this.page.currentPage = this.page.currentPage || 1;
      this.listQuery.currentPage = this.page.currentPage;
      this.listQuery.pageSize = this.page.pageSize;
      this.listQuery.type = this.listQuery.type || '';
      this.listQuery.begincreatetime = this.listQuery.begincreatetime || parseTime(new Date(), '{y}-{m}-{d}');
      this.listQuery.endcreatetime = this.listQuery.endcreatetime || parseTime(new Date(), '{y}-{m}-{d}');
      this.listQuery.param = this.listQuery.param || '';
      this.dateScope = this.dateScope || '';
      if (this.dateScope) {
        if (this.dateScope[0] && this.dateScope[1]) {
          this.listQuery.begincreatetime = parseTime(this.dateScope[0]);
          this.listQuery.endcreatetime = parseTime(this.dateScope[1]);
        } else {
          this.listQuery.begincreatetime = '';
          this.listQuery.endcreatetime = '';
        }
      }
      getSystemLogList(this.listQuery).then(response => {
        let res = response.data;
        if (res.flag === 1) {
          this.list = res.data;
          this.page = res.page;
          // console.log(this.list);
        }
        this.listLoading = false;
      })
    },
    handleDownload() {
      require.ensure([], () => {
        const {
            export_json_to_excel
          } = require('vendor/Export2Excel');
        const tHeader = ['编号', '登录账号', '账号类型', '注册时间', '最近登录', '登录地址', '状态'];
        const filterVal = ['uid', 'username', 'countType', 'usercreatedate', 'lastlogin', 'loginaddress', 'usval'];
        const list = this.list;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '列表excel');
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleDivisionChange(val) {
      console.log(val);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    }
  }
};
</script>